import 'package:flutter/material.dart';
import 'package:flutter_deer/res/colors.dart';
import 'package:flutter_deer/res/dimens.dart';
import 'package:flutter_svg/svg.dart';

class GunGridItem extends StatelessWidget {
  // 对应 tv_nzl
  const GunGridItem({
    super.key,
    required this.bean,
  });

  final GunGridBean bean;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        // image: DecorationImage(
        //   image: AssetImage('assets/images/avatar.png'), // 替换为你实际的图片路径
        //   fit: BoxFit.cover,
        // ),
        // color: Colours.grey8E9EBC,
        color: bean.cardBgColor,
        // borderRadius: const BorderRadius.only(
        //   topLeft: Radius.circular(20), // 左上角圆角
        //   bottomLeft: Radius.circular(20), // 左下角圆角
        // ),
        borderRadius: const BorderRadius.all(Radius.circular(10)),
      ),
      child: Stack(
        children: [
          // 枪号+油品, 单价
          Positioned(
            left: 15,
            top: 10,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, // 让子组件左对齐
              children: [
                // 枪号+油品
                Row(
                  // 水平方向居中对齐
                  mainAxisAlignment: MainAxisAlignment.center,
                  // 垂直方向基于基线对齐
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  // 指定使用字母基线
                  textBaseline: TextBaseline.alphabetic,
                  children: [
                    // “01”
                    Text(bean.nzlName, style: TextStyle(fontSize: Dimens.font_sp32, fontWeight: FontWeight.bold, color: bean.textColor1)),
                    // “95#”
                    Text(' / ${bean.oilName}', style: const TextStyle(fontSize: Dimens.font_sp16, color: Color(0xFF333333))),
                  ],
                ),
                const SizedBox(height: 1), //
                // 单价+错误单价
                Row(
                  // 水平方向居中对齐
                  mainAxisAlignment: MainAxisAlignment.center,
                  // 垂直方向基于基线对齐
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  // 指定使用字母基线
                  textBaseline: TextBaseline.alphabetic,
                  children: [
                    // Money
                    Text(bean.price, style: const TextStyle(fontSize: Dimens.font_sp16, fontWeight: FontWeight.normal, color: Colours.dark_text_gray)),
                    // Vol
                    Text(bean.errorPrice, style: const TextStyle(fontSize: Dimens.font_sp18, color: Colours.red)),
                  ],
                ),
              ],
            ),
          ),

          // 加油状态
          Positioned(
            right: 15,
            top: 15,
            child: Column(
              // // 水平方向居中对齐
              // mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.end,
              // // 指定使用字母基线
              // textBaseline: TextBaseline.alphabetic,
              children: [
                // “加油中”
                SvgPicture.asset('assets/images/live/ic_refueling_gun_default.svg', width: 32, height: 32),
                const SizedBox(height: 8), //
                // “加油中”
                Text(bean.statusName, style: TextStyle(fontSize: Dimens.font_sp18, fontWeight: FontWeight.bold, color: bean.textColor1)),
                const SizedBox(height: 8), //
                // “泵码值”
                // Text('bean.pumpCode', style: const TextStyle(fontSize: Dimens.font_sp18, color: Color(0xFF333333))),
              ],
            ),
          ),

          // Money+Vol+数量
          Positioned(
            left: 15,
            right: 15,
            bottom: 10,
            child: Row(
              // 垂直方向基于基线对齐
              crossAxisAlignment: CrossAxisAlignment.baseline,
              // 指定使用字母基线
              textBaseline: TextBaseline.alphabetic,
              // 水平方向左右对齐
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  // 水平方向居中对齐
                  mainAxisAlignment: MainAxisAlignment.center,
                  // 垂直方向基于基线对齐
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  // 指定使用字母基线
                  textBaseline: TextBaseline.alphabetic,
                  children: [
                    // Money
                    Text(bean.money, style: const TextStyle(fontSize: Dimens.font_sp24, fontWeight: FontWeight.bold, color: Colours.text)),
                    // Vol
                    Text('元/${bean.vol}L', style: const TextStyle(fontSize: Dimens.font_sp16, color: Colours.text)),
                  ],
                ),
                const Text('', style: TextStyle(fontSize: Dimens.font_sp18, color: Colours.dark_red)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// 定义GunGridItem的状态类
class GunGridBean {
  int nzl = 1;

  // 获取nzl name 补0
  String get nzlName => nzl.toString().padLeft(2, '0');

  int status = 0;

  // 获取状态name
  String get statusName => status == 0
      ? '离线'
      : status == 1
          ? '空闲'
          : status == 2
              ? '加油中'
              : '未知($status)';

  String vol = '0';
  String price = '';
  String errorPrice = '';
  String orderCount = '0';
  String money = '0';
  String pumpCode = '';
  String oilName = '';


  // 卡片背景颜色
  Color get cardBgColor => status == 0
      ? lightRedFFCCCC
      : status == 1
          ? lightBlueE6F7FF
          : status == 2
              ? goldFFD700
              : lightGreyF5F5F5;

  // 文字图标颜色
  Color get textColor1 => status == 0
      ? darkRedD92929
      : status == 1
          ? darkBlue2F54EB
          : status == 2
              ? darkGrey333333
              : midGrey999999;

  // 加油中状态
  static const Color goldFFD700 = Color(0xFFFFD700);       // 卡片背景（金色）
  static const Color darkGrey333333 = Color(0xFF333333);  // 文字/图标（深灰）

  // 空闲状态
  static const Color lightBlueE6F7FF = Color(0xFFE6F7FF); // 卡片背景（浅蓝）
  static const Color darkBlue2F54EB = Color(0xFF2F54EB);  // 文字/图标（深蓝）

  // 离线状态
  static const Color lightGreyF5F5F5 = Color(0xFFF5F5F5); // 卡片背景（浅灰）
  static const Color midGrey999999 = Color(0xFF999999);   // 文字/图标（中灰）

  // 未知状态
  static const Color lightRedFFCCCC = Color(0xFFFFCCCC);  // 卡片背景（浅红）
  static const Color darkRedD92929 = Color(0xFFD92929);   // 文字/图标（深红）

}
